<template>
  <div class="hot-products">
    <div class="products-left">
      <div class="section-header">
        <h3>
          <i class="fas fa-fire"></i>
          <span>行业好货</span>
        </h3>
        <NuxtLink to="/products/hot" class="more-link">
          <span>查看全部</span>
          <i class="fas fa-angle-double-right"></i>
        </NuxtLink>
      </div>
      
      <div class="product-tabs">
        <div 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-item"
          :class="{ active: activeTab === tab.id }"
          @click="activeTab = tab.id"
          @mouseenter="stopAutoSwitch"
          @mouseleave="startAutoSwitch"
        >
          {{ tab.name }}
        </div>
      </div>
      
      <div class="product-grid">
        <NuxtLink 
          v-for="product in currentProducts" 
          :key="product.id"
          :to="`/products/${product.id}`"
          class="product-card"
        >
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
            <span v-if="product.tag" class="tag" :class="product.tag.type">
              {{ product.tag.text }}
            </span>
          </div>
          <div class="product-info">
            <h4>{{ product.name }}</h4>
            <p class="description">{{ product.description }}</p>
            <div class="price-row">
              <span class="price">¥ {{ product.price }}</span>
              <span class="unit">/{{ product.unit }}</span>
              <span class="sales">月销{{ product.sales }}件</span>
            </div>
          </div>
        </NuxtLink>
      </div>
    </div>
    
    <div class="products-right">
      <div class="section-header">
        <h3>
          <i class="fas fa-calendar-alt"></i>
          <span>基地上市预告</span>
        </h3>
        <NuxtLink to="/bases" class="more-link">
          <span>更多基地</span>
          <i class="fas fa-angle-double-right"></i>
        </NuxtLink>
      </div>
      
      <div class="base-list" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
        <div class="base-scroll-container" :class="{ 'paused': isScrollPaused }">
          <div 
            v-for="base in allBases" 
            :key="base.id"
            class="base-item"
          >
            <div class="base-image">
              <img :src="base.image" :alt="base.name" />
            </div>
            <div class="base-content">
              <h4>{{ base.name }}</h4>
              <div class="base-info">
                <div class="info-row">
                  <span class="label">主要品种：</span>
                  <span class="value">{{ base.variety }}</span>
                </div>
                <div class="info-row">
                  <span class="label">种植规模：</span>
                  <span class="value">{{ base.scale }}</span>
                </div>
                <div class="info-row time-row">
                  <span class="label">预计上市：</span>
                  <span class="value time">{{ base.launchDate }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 重复一遍内容以实现无缝滚动 -->
          <div 
            v-for="base in allBases" 
            :key="`duplicate-${base.id}`"
            class="base-item"
          >
            <div class="base-image">
              <img :src="base.image" :alt="base.name" />
            </div>
            <div class="base-content">
              <h4>{{ base.name }}</h4>
              <div class="base-info">
                <div class="info-row">
                  <span class="label">主要品种：</span>
                  <span class="value">{{ base.variety }}</span>
                </div>
                <div class="info-row">
                  <span class="label">种植规模：</span>
                  <span class="value">{{ base.scale }}</span>
                </div>
                <div class="info-row time-row">
                  <span class="label">预计上市：</span>
                  <span class="value time">{{ base.launchDate }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 预约基地考察二维码 -->
      <div class="base-contact">
        <div class="contact-header">
          <i class="fas fa-qrcode"></i>
          <span>预约基地考察</span>
        </div>
        <div class="contact-content">
          <div class="qr-code">
            <img src="/images/qrcode-wechat-official.png" alt="预约基地考察二维码" />
          </div>
          <div class="contact-info">
            <p class="contact-title">扫码预约实地考察</p>
            <p class="contact-desc">专业团队带您深入了解基地情况</p>
            <div class="contact-methods">
              <div class="contact-item">
                <i class="fas fa-phone"></i>
                <span>400-888-8888</span>
              </div>
              <div class="contact-item">
                <i class="fas fa-wechat"></i>
                <span>微信：changxin-agri</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const tabs = [
  { id: 'newest', name: '最新上架' },
  { id: 'hot', name: '热销产品' },
  { id: 'recommend', name: '精品推荐' },
  { id: 'deal', name: '特惠活动' },
]

const activeTab = ref('newest')
const isScrollPaused = ref(false)
let autoSwitchTimer = null

// 自动切换tab功能
const startAutoSwitch = () => {
  autoSwitchTimer = setInterval(() => {
    const currentIndex = tabs.findIndex(tab => tab.id === activeTab.value)
    const nextIndex = (currentIndex + 1) % tabs.length
    activeTab.value = tabs[nextIndex].id
  }, 5000) // 每5秒切换一次
}

const stopAutoSwitch = () => {
  if (autoSwitchTimer) {
    clearInterval(autoSwitchTimer)
    autoSwitchTimer = null
  }
}

// 暂停滚动
const pauseScroll = () => {
  isScrollPaused.value = true
}

// 恢复滚动
const resumeScroll = () => {
  isScrollPaused.value = false
}

// 基地轮播功能
const allBases = ref([
  {
    id: 1,
    name: '湖北十堰香菇基地',
    variety: '香菇、花菇',
    scale: '传统农户种植80亩',
    launchDate: '8月15日',
    image: '/images/base-1.jpg',
  },
  {
    id: 2,
    name: '河南西峡香菇基地',
    variety: '香菇、薄盖香菇',
    scale: '农户合作社65亩',
    launchDate: '9月5日',
    image: '/images/base-2.jpg',
  },
  {
    id: 3,
    name: '山西临县香菇基地',
    variety: '山区香菇、厚盖香菇',
    scale: '农民专业合作社110亩',
    launchDate: '9月25日',
    image: '/images/base-3.jpg',
  },
  {
    id: 4,
    name: '河北平泉香菇基地',
    variety: '优质香菇、花菇',
    scale: '农户种植区60亩',
    launchDate: '10月15日',
    image: '/images/base-4.jpg',
  },
  {
    id: 5,
    name: '陕西商洛香菇基地',
    variety: '秦岭香菇、花菇',
    scale: '合作社种植120亩',
    launchDate: '11月5日',
    image: '/images/base-5.jpg',
  },
  {
    id: 6,
    name: '甘肃天水香菇基地',
    variety: '高原香菇、厚盖香菇',
    scale: '农户联合体90亩',
    launchDate: '11月25日',
    image: '/images/base-6.jpg',
  },
  {
    id: 7,
    name: '四川广元香菇基地',
    variety: '川北香菇、花菇',
    scale: '合作社种植75亩',
    launchDate: '12月15日',
    image: '/images/base-1.jpg',
  },
  {
    id: 8,
    name: '重庆巫山香菇基地',
    variety: '三峡香菇、薄盖香菇',
    scale: '农户种植区85亩',
    launchDate: '12月25日',
    image: '/images/base-2.jpg',
  }
])

const displayedBases = ref([])
let baseCarouselTimer = null

// 初始化显示前4个基地
const initBases = () => {
  displayedBases.value = allBases.value.slice(0, 4)
  console.log('初始化基地列表:', displayedBases.value.length)
}

// 基地轮播功能
const startBaseCarousel = () => {
  baseCarouselTimer = setInterval(() => {
    // 移除第一个基地
    displayedBases.value.shift()
    
    // 找到下一个要添加的基地
    const currentLastId = displayedBases.value[displayedBases.value.length - 1]?.id || 0
    const nextBaseIndex = allBases.value.findIndex(base => base.id === currentLastId) + 1
    const nextBase = allBases.value[nextBaseIndex % allBases.value.length]
    
    // 添加新的基地到底部
    displayedBases.value.push(nextBase)
  }, 8000) // 每8秒轮播一次
}

const stopBaseCarousel = () => {
  if (baseCarouselTimer) {
    clearInterval(baseCarouselTimer)
    baseCarouselTimer = null
  }
}

// 组件挂载时开始自动切换
onMounted(() => {
  initBases()
  startAutoSwitch()
  startBaseCarousel()
})

// 监听displayedBases变化，确保响应式更新
watch(displayedBases, (newBases) => {
  console.log('基地列表更新:', newBases.length)
}, { deep: true })

// 组件卸载时清除定时器
onUnmounted(() => {
  stopAutoSwitch()
  stopBaseCarousel()
})

const newestProducts = [
  {
    id: 1,
    name: '有机鲜香菇礼盒装',
    description: '精选有机香菇，无污染，农残检测合格',
    price: '68.00',
    unit: '500g',
    sales: 235,
    image: '/images/product-1.jpg',
    tag: { type: 'new', text: '新品' }
  },
  {
    id: 2,
    name: '东北优质黑木耳',
    description: '东北深山木耳，肉厚口感好',
    price: '45.90',
    unit: '袋',
    sales: 342,
    image: '/images/product-2.jpg',
    tag: { type: 'new', text: '新品' }
  },
  {
    id: 3,
    name: '菌菇酱拌饭酱组合',
    description: '多口味组合，拌饭拌面两相宜',
    price: '36.50',
    unit: '3瓶',
    sales: 512,
    image: '/images/product-3.jpg',
  },
  {
    id: 4,
    name: '新鲜杏鲍菇',
    description: '肉质紧实，鲜嫩多汁',
    price: '12.80',
    unit: '斤',
    sales: 689,
    image: '/images/product-4.jpg',
  },
  {
    id: 5,
    name: '精选金针菇',
    description: '鲜嫩爽口，适合火锅食材',
    price: '6.50',
    unit: '250g',
    sales: 830,
    image: '/images/product-5.jpg',
  },
  {
    id: 6,
    name: '菌种栽培DIY套装',
    description: '适合家庭种植，简单易操作',
    price: '88.00',
    unit: '套',
    sales: 127,
    image: '/images/product-6.jpg',
  },
]

const hotProducts = [
  {
    id: 7,
    name: '特级香菇礼盒装',
    description: '精选特级香菇，口感鲜美，营养丰富',
    price: '158.90',
    unit: '500g',
    sales: 3256,
    image: '/images/product-hot1.jpg',
    tag: { type: 'hot', text: '热销' }
  },
  {
    id: 8,
    name: '黑木耳礼盒装',
    description: '东北优质黑木耳，肉厚口感好',
    price: '128.00',
    unit: '300g',
    sales: 2986,
    image: '/images/product-hot2.jpg',
    tag: { type: 'hot', text: '热销' }
  },
  {
    id: 9,
    name: '菌菇调味料礼盒',
    description: '多口味菌菇调味料，提升菜品鲜味',
    price: '99.90',
    unit: '3瓶',
    sales: 2756,
    image: '/images/product-hot3.jpg',
    tag: { type: 'hot', text: '热销' }
  },
  {
    id: 10,
    name: '有机香菇菌种套装',
    description: '适合家庭种植，简单易操作',
    price: '299.00',
    unit: '套',
    sales: 1865,
    image: '/images/product-hot4.jpg',
    tag: { type: 'hot', text: '热销' }
  },
  {
    id: 11,
    name: '即食香菇脆片',
    description: '香脆可口，休闲零食首选',
    price: '45.90',
    unit: '200g',
    sales: 1756,
    image: '/images/product-hot5.jpg',
    tag: { type: 'hot', text: '热销' }
  },
  {
    id: 12,
    name: '菌菇养生汤包',
    description: '多种菌菇搭配，营养丰富',
    price: '69.90',
    unit: '15袋',
    sales: 1689,
    image: '/images/product-hot6.jpg',
    tag: { type: 'hot', text: '热销' }
  }
]

const recommendProducts = [
  {
    id: 13,
    name: '金针菇大礼包',
    description: '新鲜金针菇，适合火锅食材',
    price: '88.00',
    unit: '1kg',
    sales: 1542,
    image: '/images/product-hot7.jpg',
    tag: { type: 'recommend', text: '推荐' }
  },
  {
    id: 14,
    name: '高山木耳礼盒',
    description: '高山种植，品质上乘',
    price: '168.00',
    unit: '400g',
    sales: 1498,
    image: '/images/product-hot8.jpg',
    tag: { type: 'recommend', text: '推荐' }
  },
  {
    id: 15,
    name: '平菇新鲜装',
    description: '肉质厚实，口感鲜嫩',
    price: '15.80',
    unit: '斤',
    sales: 2341,
    image: '/images/product-7.jpg',
    tag: { type: 'recommend', text: '推荐' }
  },
  {
    id: 16,
    name: '茶树菇干货',
    description: '香味浓郁，煲汤佳品',
    price: '58.00',
    unit: '250g',
    sales: 1892,
    image: '/images/product-8.jpg',
    tag: { type: 'recommend', text: '推荐' }
  },
  {
    id: 17,
    name: '猴头菇礼盒',
    description: '名贵食用菌，营养价值高',
    price: '298.00',
    unit: '盒',
    sales: 756,
    image: '/images/product-9.jpg',
    tag: { type: 'recommend', text: '推荐' }
  },
  {
    id: 18,
    name: '菌菇干菜组合',
    description: '多种菌菇干菜，搭配丰富',
    price: '128.00',
    unit: '组合装',
    sales: 1123,
    image: '/images/product-10.jpg',
    tag: { type: 'recommend', text: '推荐' }
  }
]

const dealProducts = [
  {
    id: 19,
    name: '限时特价香菇',
    description: '限时优惠，品质保证',
    price: '38.80',
    unit: '500g',
    sales: 4567,
    image: '/images/product-11.jpg',
    tag: { type: 'deal', text: '特惠' }
  },
  {
    id: 20,
    name: '木耳买二送一',
    description: '买二送一活动，超值优惠',
    price: '89.90',
    unit: '3袋',
    sales: 3890,
    image: '/images/product-12.jpg',
    tag: { type: 'deal', text: '特惠' }
  },
  {
    id: 21,
    name: '金针菇特价装',
    description: '特价促销，数量有限',
    price: '12.50',
    unit: '250g',
    sales: 5678,
    image: '/images/product-13.jpg',
    tag: { type: 'deal', text: '特惠' }
  },
  {
    id: 22,
    name: '菌菇汤包组合',
    description: '组合装特价，营养搭配',
    price: '49.90',
    unit: '10袋',
    sales: 2345,
    image: '/images/product-14.jpg',
    tag: { type: 'deal', text: '特惠' }
  },
  {
    id: 23,
    name: '杏鲍菇特价',
    description: '新鲜杏鲍菇，特价销售',
    price: '18.80',
    unit: '斤',
    sales: 3456,
    image: '/images/product-15.jpg',
    tag: { type: 'deal', text: '特惠' }
  },
  {
    id: 24,
    name: '菌种套装特惠',
    description: '种植套装，特价优惠',
    price: '168.00',
    unit: '套',
    sales: 987,
    image: '/images/product-16.jpg',
    tag: { type: 'deal', text: '特惠' }
  }
]

// 获取当前标签对应的产品，如果不够15个就循环填充
const getProductsForTab = (products) => {
  if (products.length === 0) return newestProducts
  if (products.length >= 15) return products.slice(0, 15)
  
  // 如果不够15个，循环填充到15个
  const result = [...products]
  while (result.length < 15) {
    result.push(...products.slice(0, Math.min(products.length, 15 - result.length)))
  }
  return result.slice(0, 15)
}

const currentProducts = computed(() => {
  switch (activeTab.value) {
    case 'newest':
      return getProductsForTab(newestProducts)
    case 'hot':
      return getProductsForTab(hotProducts)
    case 'recommend':
      return getProductsForTab(recommendProducts)
    case 'deal':
      return getProductsForTab(dealProducts)
    default:
      return getProductsForTab(newestProducts)
  }
})

</script>

<style lang="scss" scoped>
.hot-products {
  display: flex;
  gap: $spacing-md;

  @include tablet {
    flex-direction: column;
    gap: $spacing-lg;
  }
  
  .products-left {
    flex: 2;
    
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      
      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #333;
        
        i {
          color: #e4393c;
          font-size: 22px;
        }
      }
      
      .more-link {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #666;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.3s;
        
        &:hover {
          color: #e4393c;
        }
      }
    }
    
    .product-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 15px;
      background: #fff;
      border-radius: 6px;
      padding: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .tab-item {
        flex: 1;
        padding: 12px 0;
        text-align: center;
        font-size: 15px;
        color: #666;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
        position: relative;
        
        &:hover {
          color: #e4393c;
          background: #fef5f5;
          transform: translateY(-2px);
        }
        
        &.active {
          color: #fff;
          background: linear-gradient(135deg, #e4393c 0%, #c81623 100%);
          box-shadow: 0 4px 10px rgba(228, 57, 60, 0.3);
        }
      }
    }
    
    .product-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: $spacing-sm;

      @include tablet {
        grid-template-columns: repeat(3, 1fr);
        gap: $spacing-sm;
      }

      @include mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: $spacing-sm;
      }

      @media (max-width: 480px) {
        grid-template-columns: 1fr;
        gap: $spacing-sm;
      }
      
      .product-card {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        text-decoration: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid transparent;
        
        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
          border-color: #e4393c;
          
          .product-image img {
            transform: scale(1.15);
          }
        }
        
        .product-image {
          position: relative;
          width: 100%;
          height: 140px;
          overflow: hidden;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s;
          }
          
          .tag {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 4px 10px;
            border-radius: 3px;
            font-size: 12px;
            color: #fff;
            z-index: 1;
            
            &.new {
              background: #1890ff;
            }
            
            &.hot {
              background: #e4393c;
            }
          }
        }
        
        .product-info {
          padding: 8px;
          
          h4 {
            margin: 0 0 6px;
            font-size: 13px;
            font-weight: 600;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 1.3;
          }
          
          .description {
            margin: 0 0 8px;
            font-size: 11px;
            color: #999;
            height: 28px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.4;
          }
          
          .price-row {
            display: flex;
            align-items: baseline;
            white-space: nowrap;
            
            .price {
              color: #e4393c;
              font-size: 14px;
              font-weight: 700;
            }
            
            .unit {
              color: #999;
              font-size: 10px;
              margin-left: 2px;
            }
            
            .sales {
              margin-left: auto;
              font-size: 10px;
              color: #999;
            }
          }
        }
      }
    }
  }
  
  .products-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      
      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #333;
        
        i {
          color: #e4393c;
          font-size: 22px;
        }
      }
      
      .more-link {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #666;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.3s;
        
        &:hover {
          color: #e4393c;
        }
      }
    }
    
    .base-list {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      flex: 1;
      overflow: hidden;
      position: relative;
      margin-bottom: 15px;
      
      .base-scroll-container {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        animation: scrollUp 20s linear infinite;
        
        &.paused {
          animation-play-state: paused;
        }
      }
      
      .base-item {
        display: flex;
        gap: 15px;
        padding: 18px 0;
        border-bottom: 1px solid #f5f5f5;
        align-items: flex-start;
        
        &:last-child {
          border-bottom: none;
        }
        
        .base-image {
          width: 100px;
          height: 100px;
          flex-shrink: 0;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }
        }
        
        .base-content {
          flex: 1;
          padding-left: 5px;
          
          h4 {
            margin: 0 0 12px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .base-info {
            .info-row {
              display: flex;
              margin-bottom: 6px;
              font-size: 13px;
              align-items: center;
              
              .label {
                color: #999;
                flex-shrink: 0;
                width: 70px;
                font-weight: 500;
              }
              
              .value {
                color: #666;
                flex: 1;
                font-weight: 400;
              }
              
              &.time-row {
                margin-top: 8px;
                padding-top: 8px;
                border-top: 1px solid #f0f0f0;
                
                .time {
                  color: #e4393c;
                  font-weight: 600;
                  font-size: 14px;
                }
              }
            }
          }
        }
        
        &:hover {
          .base-image img {
            transform: scale(1.05);
          }
          
          .base-content h4 {
            color: #e4393c;
          }
        }
      }
    }
    
    // 预约基地考察样式
    .base-contact {
      padding: 20px;
      background: #ffffff;
      border-radius: 8px;
      border: 2px solid #e0e0e0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      flex-shrink: 0;
      
      .contact-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        
        i {
          color: #4CAF50;
          font-size: 18px;
        }
      }
      
      .contact-content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        flex: 1;
        
        .qr-code {
          flex-shrink: 0;
          
          img {
            width: 100px;
            height: 100px;
            border-radius: 4px;
            border: 2px solid #ddd;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
        }
        
        .contact-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          position: relative;
          z-index: 1;
          
          .contact-title {
            margin: 0 0 8px;
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            line-height: 1.3;
          }
          
          .contact-desc {
            margin: 0 0 15px;
            font-size: 13px;
            color: #7f8c8d;
            line-height: 1.4;
          }
          
          .contact-methods {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-start;
            
            .contact-item {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 12px;
              color: #34495e;
              transition: all 0.3s ease;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              
              &:hover {
                transform: translateX(3px);
                color: #4CAF50;
              }
              
              i {
                width: 14px;
                text-align: center;
                color: #4CAF50;
                font-size: 12px;
                flex-shrink: 0;
              }
            }
          }
        }
      }
    }
  }
}

// 滚动向上动画
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
